<template>
	<div class="hashrateMange">
		<a-button type="primary" icon="plus" @click="visible = true,title = '新增算力'">新增算力</a-button>
		<div ref="modalHtml">
			<a-modal v-model="visible" :title="title" :footer="null" @cancel="cancelModal" width="60%"
				:getContainer="() => $refs.modalHtml">
				<a-form-model :model="modalForm" :label-col="{span: 6}" :wrapper-col="{span: 14}" ref="ruleForm">
					<a-row class="formInput">
						<a-col :span="12">
							<a-form-model-item label="算力名称">
								<a-input v-model="modalForm.name"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="合约周期">
								<a-input v-model="modalForm.contractPeriod" :min='0' type="number" suffix="天"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="总算力">
								<a-input v-model="modalForm.power" type="number" min='0' suffix="T"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="已售算力">
								<a-input v-model="modalForm.saledPower" type="number" min='0' suffix="T"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="开始售卖时间">
								<a-date-picker v-model="modalForm.saleStartTime" valueFormat="YYYY-MM-DD"
									format="YYYY-MM-DD" class="timeWidth" :disabled-date="disabledDate" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="结束售卖时间">
								<a-date-picker v-model="modalForm.saleEndTime" valueFormat="YYYY-MM-DD"
									format="YYYY-MM-DD" class="timeWidth" :disabled-date="disabledDate1" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="结算周期">
								<a-input v-model="modalForm.startWorkDays" addon-before="T + " default-value="7" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="服务费">
								<a-input v-model="modalForm.servicePrice" type="number" :min='0' :max="50" suffix="%">
								</a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="电费">
								<a-input v-model="modalForm.electricityPrice" type="number" :min='0' suffix="USDT/KW-H"
									class="one"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="算力价格">
								<a-input v-model="modalForm.computeOriginalPrice" type="number" :min='0' suffix="USDT/T"
									class="two"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="算力折扣">
								<a-input v-model="modalForm.discount" type="number" :min='0' :max="100" suffix="折(%)">
								</a-input>
							</a-form-model-item>
						</a-col>
						<!-- <a-col :span="12">
							<a-form-model-item label="预估日收益">
								<a-input v-model="modalForm.income" type="number" :min='0' suffix="FIL/T" class="three">
								</a-input>
							</a-form-model-item>
						</a-col> -->
						<a-col :span="12">
							<a-form-model-item label="购买门槛">
								<a-input v-model="modalForm.buyingThreshold" type="number" :min='1' suffix="T">
								</a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="质押">
								<a-input v-model="modalForm.massPressure" type="number" :min='0'></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="状态">
								<a-select v-model="modalForm.saleStatus">
									<a-select-option :value="2"> 售罄</a-select-option>
									<a-select-option :value="1"> 在售</a-select-option>
									<a-select-option :value="0"> 下架</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-form-model-item>
						<a-button type="primary" :loading="loading" @click="submitForm('ruleForm')"
							style="float: right">提交
						</a-button>
					</a-form-model-item>
				</a-form-model>
			</a-modal>
		</div>
		<a-table :columns="columns" :data-source="tableData" :loading="tableLoading" :pagination="pagination"
			@change="pageChange" :rowKey="rowKey" :scroll="{ x: 1750}">
			<template slot="operate" slot-scope="text, record">
				<a-button type="primary" size="small" @click="checkDetail(record)">详情</a-button>
				<a-button type="primary" size="small" @click="editRecord(record)" style="margin-left: 5px">编辑</a-button>
			</template>
		</a-table>
		<p style="font-size: 20px">算力销售明细</p>
		<a-table :columns="columns1" :data-source="data1" :pagination="false" :rowKey="rowKey">
		</a-table>
	</div>
</template>

<script>
	import {
		addComputingPower,
		getComputingPower,
		getComputingPowerDetail,
		getComputingPowerUpdate
	} from '../../serves/index'

	import moment from 'moment'

	const columns = [{
			title: '算力名称',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '总算力',
			dataIndex: 'power',
			key: 'power'
		},
		{
			title: '剩余算力',
			dataIndex: 'remainingPower',
			key: 'remainingPower'
		},
		{
			title: '开始售卖时间',
			dataIndex: 'saleStartTime',
			key: 'saleStartTime',
			ellipsis: true,
		},
		{
			title: '结束售卖时间',
			dataIndex: 'saleEndTime',
			key: 'saleEndTime',
			ellipsis: true,
		},
		{
			title: '封装周期（天）',
			dataIndex: 'startWorkDays',
			key: 'startWorkDays',
			ellipsis: true,
		},
		{
			title: '合约周期（天）',
			dataIndex: 'contractPeriod',
			key: 'contractPeriod',
			ellipsis: true,
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			ellipsis: true,
		},
		{
			title: '服务费(%)',
			dataIndex: 'servicePrice',
			key: 'servicePrice',
			ellipsis: true,
		},
		// {
		// 	title: '电费',
		// 	dataIndex: 'electricityPrice',
		// 	key: 'electricityPrice',
		// 	ellipsis: true,
		// },
		{
			title: '算力价格',
			dataIndex: 'computeOriginalPrice',
			key: 'computeOriginalPrice',
			ellipsis: true,
		},
		{
			title: '算力折扣',
			dataIndex: 'discount',
			key: 'discount',
			ellipsis: true,
		},
		// {
		// 	title: '预估日收益',
		// 	dataIndex: 'income',
		// 	key: 'income',
		// 	ellipsis: true,
		// },
		// {
		// 	title: '购买门槛',
		// 	dataIndex: 'buyingThreshold',
		// 	key: 'buyingThreshold',
		// 	ellipsis: true,
		// },
		// {
		// 	title: '质押',
		// 	dataIndex: 'massPressure',
		// 	key: 'massPressure',
		// 	ellipsis: true,
		// },
		{
			title: '操作',
			dataIndex: 'operate',
			key: 'operate',
			ellipsis: true,
			fixed: 'right',
			scopedSlots: {
				customRender: 'operate'
			},
		}
	];
	const columns1 = [{
			title: '算力名称',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '总算力',
			dataIndex: 'power',
			key: 'power'
		},
		{
			title: '剩余算力',
			dataIndex: 'remainingPower',
			key: 'remainingPower'
		},
		{
			title: '开始售卖时间',
			dataIndex: 'saleStartTime',
			key: 'saleStartTime',
			ellipsis: true,
		},
		{
			title: '结束售卖时间',
			dataIndex: 'saleEndTime',
			key: 'saleEndTime',
			ellipsis: true,
		},
		{
			title: '封装周期（天）',
			dataIndex: 'startWorkDays',
			key: 'startWorkDays',
			ellipsis: true,
		},
		{
			title: '合约周期（天）',
			dataIndex: 'contractPeriod',
			key: 'contractPeriod',
			ellipsis: true,
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			ellipsis: true,
		},
		{
			title: '服务费(%)',
			dataIndex: 'servicePrice',
			key: 'servicePrice',
			ellipsis: true,
		},
		// {
		// 	title: '电费',
		// 	dataIndex: 'electricityPrice',
		// 	key: 'electricityPrice',
		// 	ellipsis: true,
		// },
		{
			title: '算力价格',
			dataIndex: 'computeOriginalPrice',
			key: 'computeOriginalPrice',
			ellipsis: true,
		},
		{
			title: '算力折扣',
			dataIndex: 'discount',
			key: 'discount',
			ellipsis: true,
		},
		// {
		// 	title: '预估日收益',
		// 	dataIndex: 'income',
		// 	key: 'income',
		// 	ellipsis: true,
		// },
		// {
		// 	title: '购买门槛',
		// 	dataIndex: 'buyingThreshold',
		// 	key: 'buyingThreshold',
		// 	ellipsis: true,
		// },
		// {
		// 	title: '质押',
		// 	dataIndex: 'massPressure',
		// 	key: 'massPressure',
		// 	ellipsis: true,
		// }
	];
	export default {
		name: "HashrateMange",
		data() {
			return {
				columns,
				columns1,
				tableLoading: false,
				tableData: [],
				data1: [],
				visible: false,
				title: '新增算力',
				pagination: {
					current: 1,
					total: 0,
					pageSize: 10,
					showSizeChanger: true,
					showTotal: total => `共 ${total} 条`,
					pageSizeOptions: ['10', '20', '30', '40', '50'],
				},
				lastPageSize: 10,
				modalForm: {
					name: '',
					power: 100,
					saledPower: 0,
					saleStartTime: '',
					saleEndTime: '',
					startWorkDays: 7,
					contractPeriod: '',
					servicePrice: 20,
					electricityPrice: 0,
					computeOriginalPrice: '',
					discount: 100,
					income: '0',
					buyingThreshold: '',
					massPressure: '',
					saleStatus: 1,
				},
				loading: false
			}
		},
		mounted() {
			this.handleQuery()
		},
		methods: {
			disabledDate(current) {
				return current && current <= new Date(moment().endOf('day')) - 24 * 60 * 60 * 1000;
			},
			disabledDate1(current) {
				return current && current <= new Date(this.modalForm.saleStartTime);
			},
			rowKey(record, index) {
				return index
			},
			// 查看详情
			checkDetail(val) {
				getComputingPowerDetail({
					id: val.id
				}).then(res => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.data1 = [res.data.data]
					} else {
						this.$message.warning(res.data.message)
					}
				})
			},
			// 便捷
			editRecord(val) {
				this.title = '修改算力'
				for (let k in this.modalForm) {
					this.modalForm[k] = val[k]
				}
				this.powerId = val.id
				this.visible = true
			},
			handleQuery() {
				let params = {
					pageNum: this.pagination.current,
					pageSize: this.pagination.pageSize
				}
				this.tableLoading = true;
				getComputingPower(params).then(res => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.tableData = res.data.data.records
						this.pagination.total = res.data.data.total
					} else if (res.data.status.code == 450) {
						this.$message.warning(res.data.message)
						this.$router.push({
							path: '/manageLogin'
						})
					} else {
						this.$message.warning(res.data.message)
					}
					this.tableLoading = false;
				})
			},
			pageChange(val) {
				this.pagination.pageSize = val.pageSize
				if (val.pageSize != this.lastPageSize) {
					this.pagination.current = 1
					this.lastPageSize = val.pageSize
				} else {
					this.pagination.current = val.current
				}
				this.handleQuery()
			},
			submitForm() {
				this.modalForm.saleStartTime = this.modalForm.saleStartTime + ' 12:00:00'
				this.modalForm.saleEndTime = this.modalForm.saleEndTime + ' 12:00:00'
				this.loading = true
				if (this.title == '新增算力') {
					addComputingPower(this.modalForm).then(res => {
						if (res.status == 200 && res.data.status.code == 200) {
							this.$message.success('添加成功！')
							this.loading = false
							this.handleQuery()
							this.visible = false
						} else if (res.data.status.code == 450) {
							this.$message.warning(res.data.message)
							this.$router.push({
								path: '/manageLogin'
							})
						} else {
							this.$message.warning(res.data.message)
						}
					})
				} else {
					this.modalForm.powerId = this.powerId
					getComputingPowerUpdate(this.modalForm).then(res => {
						if (res.status == 200 && res.data.status.code == 200) {
							this.$message.success('修改成功！')
							this.visible = false
							this.loading = false
							this.handleQuery()
						} else if (res.data.status.code == 450) {
							this.$message.warning(res.data.message)
							this.$router.push({
								path: '/manageLogin'
							})
						} else {
							this.$message.warning(res.data.message)
						}
					})
				}

			},
			cancelModal() {
				for (let k in this.modalForm) {
					this.modalForm[k] = ''
				}
				this.$refs['ruleForm'].resetFields()
			},
		}
	}
</script>

<style lang="scss">
	.hashrateMange {
		text-align: left;

		.formInput {

			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance: none !important;
			}

			input[type="number"] {
				-moz-appearance: textfield;
			}
		}

		.ant-input-suffix {
			font-size: 12px;
		}

		.one {
			.ant-input:not(:last-child) {
				padding-right: 80px;
			}
		}

		.two {
			.ant-input:not(:last-child) {
				padding-right: 55px;
			}
		}

		.three {
			.ant-input:not(:last-child) {
				padding-right: 40px;
			}
		}

		.timeWidth {
			width: 100%;
		}

	}
</style>
